<template>
<div class="LoginContainer">
        <el-card class="box-card">
            <h3 class="login_title">系统登录</h3>
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="login-container">
                 <el-form-item label="用户名:" prop="username" label-width="80px">
                    <el-input v-model.number="ruleForm.username" autocomplete="off" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="密码:" prop="pass" label-width="80px">
                    <el-input type="password" v-model="ruleForm.pass" autocomplete="off" placeholder="请输入密码"></el-input>
                </el-form-item>
                
               
                <el-form-item class="login_submit">
                    <el-button type="primary" @click="login()">登录</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
            <router-link tag="a" target="_blank" to="/register">免费注册</router-link>

            <p>您输入的用户名是：{{ruleForm.username}}</p>
            <p>您输入的密码是：{{ruleForm.pass}}</p>
            <!-- <router-view></router-view> -->
       

        </el-card>
        
        
    </div>
</template>

<script>
import axios from 'axios'

  export default {
    data() {
      var checkUserName = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('用户名不能为空'));
        }
        // setTimeout(() => {
        //   if (!Number.isInteger(value)) {
        //     callback(new Error('请输入数字值'));
        //   } else {
        //     if (value < 18) {
        //       callback(new Error('必须年满18岁'));
        //     } else {
        //       callback();
        //     }
        //   }
        // }, 1000);
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        ruleForm: {
          pass: '', //输入的密码
          checkPass: '',
          username: '' //输入的账号
        },
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          username: [
            { validator: checkUserName, trigger: 'blur' }
          ]
        },
        mySQL_data:{
            username: '',
            pass: ''
        }

      };
    },
    methods: {
        login(){
            // return this.$db.test()
            //这里是登录按钮
            // alert('这个是登录')
            // axios.get('http://localhost/login').then(res => {
                // console.log(this.ruleForm.username)
                // ,{params:{username:this.ruleForm.username}}
            axios.get('http://localhost/login',{params:{username:this.ruleForm.username}}).then(res => {
                // console.log('进入查询')
                
                if(res.data[0].password==this.ruleForm.pass){
                    this.$message.success('登录成功')
                    this.$store.commit('updateUsername',this.ruleForm.username)
                    this.$store.commit('updateUserClass')//更新blog类型
                    this.$store.commit('updateUserArticle')//更新文章
                    this.$router.push({name:'home'})
                    localStorage.setItem('token','111111')
                    let userInfo = {
                        isLogin:true,
                        name:this.ruleForm.username
                    }
                    //头像设定
                    this.$store.state.imgurl=res.data[0].imgurl
                    console.log(this.$store.state.imgurl)
                     localStorage.setItem('imgurl',JSON.stringify(this.$store.state.imgurl))
                    //创建localstorage
                    localStorage.setItem('userInfo',JSON.stringify(userInfo))
                    this.$store.state.userInfo=userInfo
                    console.log('this.$store.state.userInfo:'+this.$store.state.userInfo.name)
                    // localStorage.setItem('state',JSON.stringify(this.$store.state))
                    // localStorage.getItem('state')&&this.$store.replaceState(JSON.parse(localStorage.getItem('state')))
                }else{
                    alert('登录失败，用户名不存在或密码错误')
                }
              

            }).catch(err => {
                console.log("获取数据失败" + err);
            })
        },
      submitForm(formName) {
          
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
        // return DbJs.sql
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
      
    },
    watch:{
        $router(to,from){
            console.log('to.path----',to.path)//跳转后路由
              console.log('from----',from)//跳转前路由
              this.navSelect(to.path)
    },
    computed: {
   key() {
     return  this .$route.name !== undefined?  this .$route.name + new  Date():  this .$route + new  Date()
   },
   created() {
    // console.log(localStorage.getItem('name'))
   },
   mounted() {
       //判断登录状态
       let userInfo =JSON.parse(localStorage.getItem('userInfo'))
       if(userInfo === null) return//为空证明未登录，
       if(userInfo.isLogin){
            this.$store.commit('updateUsername',userInfo.name)
            this.$store.commit('updateUserClass')//更新blog类型
            this.$store.commit('updateUserArticle')//更新文章
            console.log(userInfo)
       }

   },
}
}
  }
</script>

<style >
    body{
        /* display: flex; */
        
     
    }
  /* .text {
    font-size: 14px;
  } */

  /* .item {
    margin-bottom: 18px;
  } */
.LoginContainer{
    display: flex;
    justify-content: center;;
    /* align-content: center; */
    align-items: center;
    width: 100%;
    height: 500px;
    /* background-color: black */
    /* margin: 50px auto */
    
}
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    /* display: flex; */
    /* width: 400px; */
  }
  .login_title{
      /* margin: auto auto */
      /* background-color: red */
  }
  .el-form-item{
     /* background-color: blue; */
     /* text-align: center; */
     
  }
  .login_title{
      margin: 10px auto 10px auto;
      text-align: center;
      color: #505458;

      /* background-color: red */
  }
  .login_submit{
      /* padding: 20px auto; */
      display: flex;
      margin: 10px auto 0px auto;
      /* background-color: red; */

  }
  .login-container{
    /* background-clip: padding-box */
    /* margin: 180px auto */
    width: 300px;
    padding: 35px 35px 15px 15px ;
    /* background-color: #fff */
  }
</style>